<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/bookstore.css">
    <script src="./lib/jquery-3.7.1.js"></script>
    <script>
        function listBook() {
            fetch('./api/book/list')
                .then(response => response.json())
                .then(data => createBookTable(data))
                .catch(error => console.log(error));
            console.log("fetch data")
        }

        function createBookTable(json) {
            var books = json["data"];
            var tbody = $("#books");
            tbody.empty();
            for(var i=0; i<books.length; i++) {
                var b = books[i];
                addBookToTable(b);
            }
        }

        function addBookToTable(b) {
            var tbody = $("#books");
            var tr = $("<tr></>tr>");
            tr.append("<td>" + b.id + "</td>");
            tr.append("<td>" + b.name + "</td>");
            tr.append("<td>" + b.author + "</td>");
            tr.append("<td>" + b.price + "</td>");
            tr.append("<td>" + b.memo + "</td>");
            tr.append("<td>" + b.publish + "</td>");
            tr.append("<td><img class='book-img-thumbnail' src='./upload/" + b.image + "'/></td>");
            tr.append("<td><a href='./book/delete?id=" + b.id + "'>删除</a></td>");
            tr.append("<td><a href='./book/edit?id=" + b.id + "'>修改</a></td>");
            tbody.append(tr);
        }

        function addBook() {
            var name = $("input[name='name']").val();
            var author = $("input[name='author']").val();
            var price = $("input[name='price']").val();
            var memo = $("input[name='memo']").val();
            var publish = $("input[name='publish']").val();
            var book = {
                "name":name, "author":author, "price": parseFloat(price), "memo":memo, "publish":publish
            };

            $.post({
                url: "./api/book/add",
                contentType: "application/json",
                data: JSON.stringify(book),
                success: function(response) {
                    console.log(response);
                    addBookToTable(response.data);
                },
                error: function(xhr, status, error) {
                    console.log(error);
                }
            });
        }

    </script>
</head>
<body>

<center>
    <table class='bs'>
        <thead>
        <tr>
            <th>编号</th><th>书名</th><th>作者</th><th>价格</th><th>描述</th><th>发行日期</th><th>图片</th><th></th><th></th>
        </tr>
        </thead>
        <tbody id="books">
        </tbody>
    </table>

    <br><br>
    <!--    <form action="./api/book/add" method="post">-->
    <form id="addBookForm">
        书名：<input type="text" name="name" value="11"><br><br>
        作者：<input type="text" name="author" value="22"><br><br>
        价格：<input type="text" name="price" value="33"><br><br>
        备注：<input type="text" name="memo" value="44"><br><br>
        日期：<input type="text" name="publish" value="2024-11-11"><br><br>
        <input type="button" name="submit" value="添加图书" onclick="addBook()"/>
    </form>
</center>

<script>
    $(document).ready(function(){
        listBook();
    });
</script>

</body>
</html>